import React from 'react';
import { Modal, Form, Input } from 'antd';

const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
};


const EditModal: React.FC<any> = (props: any) => {
  const { onEdit, onCancel, form, type, currentItem, ...modalProps } = props;
  // console.log(modalProps);
  
  const onOk = ()=>{
    // console.log(form);
    const values = form.getFieldsValue();
    onEdit(values)
  }

  return (
    <Modal
      {...modalProps}
      title={type === 'add' ? '新增' : '编辑'}
      onOk={onOk}
      onCancel={onCancel}
      maskClosable={false}
    >
      <Form
        {...layout}
        name="basic"
        form={form}
        initialValues={{ remember: true }}
      >
        <Form.Item
          label="姓名"
          name="name"
          initialValue={currentItem.name}
          rules={[{ required: true, message: '' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="年龄"
          name="age"
          initialValue={currentItem.age}
          rules={[{ required: true, message: '' }]}
        >
          <Input type="number" />
        </Form.Item>
        <Form.Item
          label="身高"
          name="height"
          initialValue={currentItem.height}
          rules={[{ required: true, message: '' }]}
        >
          <Input type="number" />
        </Form.Item>
        <Form.Item
          label="体重"
          name="weight"
          initialValue={currentItem.weight}
          rules={[{ required: true, message: '' }]}
        >
          <Input type="number" />
        </Form.Item>
        <Form.Item
          label="现居地"
          name="city"
          initialValue={currentItem.city}
          rules={[{ required: true, message: 'ti' }]}
        >
          <Input />
        </Form.Item>
      </Form>
    </Modal>
  )
}

export default EditModal;